<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美女图片</title>
</head>
<body>
    
    
    
 <div class="content">
    
   

    <ul class="girls" id="girls">
        <!-- <li class="girl">测试</li> -->
    </ul>
 


 </div>   


<script>


const imglist = [];


var url = "img.json"
// 申明一个XMLHttpRequest
var request = new XMLHttpRequest();
// 设置请求方法与路径
request.open("get", url);
// 不发送数据到服务器
request.send(null);
//XHR对象获取到返回信息后执行
request.onload = function () {
    // 解析获取到的数据
    var data = JSON.parse(request.responseText);
     
    console.log(data[1])
   //获取ul列表
   var ul = document.getElementById("girls");

   //给图片数组复制
  

  

    for(let i=0; i<data.length;i++){
        var item = data[i]
        var title = item.title;
        //封面
        var cover = item.list[0]
        var list = item.list;
        imglist.push(item)
    
        //写入
       ul.innerHTML = ul.innerHTML + "<a href='javascript:;' id='it"+ i +
       
       "' onclick='on("+i+");'><li class='girl'><img class='girlimg'   src="+ cover +">"
         + "<div>"+ 
            title +
          "</div>" +
        +"</li></a>"
 

    }
 
}



//详细查看美女
function on(index){

  

//   //获取imglist中对应的图片src

//    var item = imglist[index]
   
//   //获取item中的数组
//    var list = item.list;

//     var ul = document.getElementById("girls");
//      ul.innerHTML = "<li>hhh</li>"
  
//    for(let i=0;i<list.length;i++){

//     var src = list[i]

//     console.log(src);

   

   

//      //写入
//     ul.innerHTML = ul.innerHTML + "<li class='girl'><img class='girlimg'  src="+ src +"></li>"
        
   
    var url = "./info.html?index="+index 
  
    location.href = url;
    
   }

   







</script>

<style>
    li{
        list-style: none;
    }
    a{
        text-decoration: none;
        color: black;
    }
    .girlimg{
        width:300px;
        height: 400px;
        margin-left: 20px;
        margin-top: 20px;
    }
    .girl{
        float: left;
    }
</style>

</body>






</html>